<script lang="ts" setup xmlns="http://www.w3.org/1999/html">
import {reactive, ref} from "vue";
import {shopEdit, shopInfo} from "../../api/shop";
import {ElMessage} from "element-plus";

const API = ref<string>('http://sellServe.hxw.asia:5000')
const isSave = ref<boolean>(false)
const dialogImageUrl = ref('')
const dialogVisible = ref<boolean>(false)
let form = reactive({
  id: '',
  name: '',
  bulletin: '',
  avatar: '',
  deliveryPrice: '',
  deliveryTime: '',
  description: '',
  score: 0,
  sellCount: '',
  supports: [],
  pics: [],
  date: [],
  minPrice: ''
})

async function getData() {
  let res = await shopInfo()
  let {data} = res.data
  let arr = data.pics.map((v: any) => {
    return {
      name: v,
      url: API + '/upload/shop/' + v
    }
  })
  data.pics = arr
  form = data
}

async function handleSave() {
  let pics = form.pics.map((v: any) => {
    return v.name
  })
  let res = await shopEdit({...form, pics})
}

function handleRemove(file: any, fileList: any) {
  form.pics = fileList.map((v: any) => {
    return {
      name: v.name,
      url: v.url
    }
  })
}

function handlePictureCardPreview(file: any) {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}

function handleShopSuccess(res: any) {
  let {code, imgUrl, msg} = res
  if (code === 0) {
    ElMessage({
      type: 'success',
      message: msg
    })
    // form.pics = [...form.pics, {
    //   name: imgUrl.substr(imgUrl.lastIndexOf('/') + 1), url: API + imgUrl
    // }]
  }
}

function handleAvatarSuccess(res: any, file: any) {
  let {code, msg, imgUrl} = res
  if (code == 0) {
    ElMessage({
      type: 'success',
      message: msg
    })
    form.avatar = imgUrl.substr(imgUrl.lastIndexOf('/') + 1)
  } else {
    ElMessage.error(msg)
  }
}

function beforeAvatarUpload(file: any) {
  const isJPG = /[jpeg|png]/.test(file.type)
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是JPG格式')
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB')
  }
  return isLt2M && isJPG
}

getData()
</script>
<template>
  <el-card class="shop">
    <template #header>
      <div class="header">
        <span>店铺管理</span>
        <el-button
            v-if="isSave"
            type="success"
            size="mini"
            @click="
          handleSave();
          isSave = !isSave;
        "
        >保存
        </el-button>
        <el-button v-else size="mini" @click="isSave = !isSave">编辑</el-button>
      </div>
    </template>
    <div class="content">
      <!-- form -->
      <el-form
          :model="form"
          size="small"
          label-width="60px"
          class="form"
          :disabled="!isSave"
      >
        <!-- 店铺名称 -->
        <el-form-item label="店铺名称">
          <el-input v-model="form.name" type="text"></el-input>
        </el-form-item>
        <!-- 店铺公告 -->
        <el-form-item label="店铺公告">
          <el-input
              v-model="form.bulletin"
              :rows="8"
              type="textarea"
          ></el-input>
        </el-form-item>
        <!-- 店铺头像 -->
        <el-form-item label="店铺头像">
          <el-upload
              class="avatar-uploader"
              :action="API + '/shop/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img
                v-if="form.avatar"
                :src="API + '/upload/shop/' + form.avatar"
                class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <!-- 店铺图片 -->
        <el-form-item label="店铺图片">
          <el-upload
              :action="API + '/shop/upload'"
              list-type="picture-card"
              :file-list="form.pics"
              :on-success="handleShopSuccess"
              :before-upload="beforeAvatarUpload"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt=""/>
          </el-dialog>
        </el-form-item>
        <!-- 配送费 -->
        <el-form-item label="配送费">
          <el-input-number
              v-model="form.deliveryPrice"
              :min="1"
              :max="100"
              label="描述文字"
          ></el-input-number>
        </el-form-item>
        <!-- 配送时间 -->
        <el-form-item label="配送时间">
          <el-input-number
              v-model="form.deliveryTime"
              :min="1"
              :max="100"
              label="描述文字"
          ></el-input-number>
        </el-form-item>
        <!-- 配送描述 -->
        <el-form-item label="配送描述">
          <el-input v-model="form.description" type="text"></el-input>
        </el-form-item>
        <!-- 店铺评分 -->
        <el-form-item label="店铺评分">
          <el-rate v-model="form.score"></el-rate>
        </el-form-item>
        <!-- 销量 -->
        <el-form-item label="销量">
          <el-input-number
              v-model="form.sellCount"
              :min="1"
              :max="10000"
              label="描述文字"
          ></el-input-number>
        </el-form-item>
        <!-- 活动 -->
        <el-form-item label="活动">
          <el-checkbox-group v-model="form.supports">
            <el-checkbox label="在线支付满28减5"></el-checkbox>
            <el-checkbox label="VC无限橙果汁全场8折"></el-checkbox>
            <el-checkbox label="单人精彩套餐"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购"></el-checkbox>
            <el-checkbox label="单人特色套餐"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 营业时间 -->
        <el-form-item label="营业时间">
          <el-time-picker
              value-format="HH:mm:ss"
              is-range
              v-model="form.date"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.avatar-uploader {
  margin: 20px 0;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.form {
  width: 300px;
}

:deep(.el-upload-list--picture-card) {
  display: flex;
  flex-wrap: wrap;
}

:deep(.el-upload-list) {
  width: 400px;
}
</style>